<script setup lang="ts" name="ContentFormTable">
import { propTypes } from '@/utils/propTypes'

const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('content-form-table')

const slots = useSlots()

defineProps({
  layout: propTypes.string.def('default'), // 取值 simple | default | module
  border: propTypes.bool.def(false),
  padding: propTypes.string.def('20px')
})
</script>

<template>
  <div :class="[prefixCls, layout, border ? 'is-border' : '', slots.header ? 'is-header' : '']">
    <div v-if="slots.header" :class="prefixCls + '__header'">
      <slot name="header" />
    </div>
    <div :class="prefixCls + '__body'">
      <div v-if="slots.tool" class="table-tool">
        <slot name="tool" />
      </div>
      <div :class="prefixCls + '__wrap'">
        <div class="abs-pane">
          <slot name="content" />
        </div>
      </div>
      <slot name="footer" />
    </div>
  </div>
</template>

<style scoped lang="scss">
$prefix-cls: #{$namespace}-content-form-table;

.#{$prefix-cls} {
  display: flex;
  flex-direction: column;
  flex: 1;

  &.is-header{
    .#{$prefix-cls}__body{
      margin-top: calc(var(--el-space) - 6px);
    }

    &.module{
      .#{$prefix-cls}__body{
        margin-top: var(--el-space);
      }
    }
  }

  &.default{
    padding: v-bind(padding);
    background: var(--el-bg-color);
    border-radius: var(--el-border-radius-base);

    &.is-border {
      border: var(--el-border);
    }
  }

  &.simple {
    padding: v-bind(padding);
    margin: calc(0px - var(--el-space));
    background: var(--el-bg-color);
  }

  &.module {

    .#{$prefix-cls}__header {
      padding: v-bind(padding) v-bind(padding) calc(v-bind(padding) - 6px);
      background: var(--el-bg-color);
      border-radius: var(--el-border-radius-base);
    }
    .#{$prefix-cls}__body{
      padding: v-bind(padding);
      background: var(--el-bg-color);
      border-radius: var(--el-border-radius-base);
    }

    &.is-border {
      .#{$prefix-cls}__header, .#{$prefix-cls}__body {
        border: var(--el-border);
      }
    }
  }

  .table-tool{
    display: flex;
  }

  &__body {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  &__wrap{
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;

    .abs-pane{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
